﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Widgets/Widgets.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="body" runat="server">

    <h2>Chat</h2>

<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: Web Socket</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="http://html5demos.com/js/h5utils.js"></script>

<section id="wrapper">

<style>
#chat { width: 97%; }
.them { font-weight: bold; }
.them:before { content: 'them '; color: #bbb; font-size: 14px; }
.you { font-style: italic; }
.you:before { content: 'you '; color: #bbb; font-size: 14px; font-weight: bold; }
#log {
  overflow: auto;
  max-height: 300px;
  list-style: none;
  padding: 0;
/*  margin: 0;*/
}
#log li {
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 10px 0;
}
</style>
<article>
  <form>
    <input type="text" id="chat" placeholder="type and press enter to chat" />
  </form>
  <p id="status">Not connected</p>
  <p>Users connected: <span id="connected">0</span></p>
<ul id="log"></ul>
</article>
<script>
    // let's invite Firefox to the party.
    if (window.MozWebSocket) {
        window.WebSocket = window.MozWebSocket;
    }

    function openConnection() {
        // uses global 'conn' object
        if (conn.readyState === undefined || conn.readyState > 1) {
            conn = new WebSocket('ws://node.remysharp.com:8001');
            conn.onopen = function () {
                state.className = 'success';
                state.innerHTML = 'Socket open';
            };

            conn.onmessage = function (event) {
                // console.log(event.data);
                var message = event.data; //JSON.parse(event.data);
                if (!(/^\d+$/).test(message)) {
                    log.innerHTML = '<li class="them">' + message.replace(/[<>&]/g, function (m) { return entities[m]; }) + '</li>' + log.innerHTML;
                } else {
                    connected.innerHTML = message;
                }
            };

            conn.onclose = function (event) {
                state.className = 'fail';
                state.innerHTML = 'Socket closed';
            };
        }
    }

    var connected = document.getElementById('connected'),
    log = document.getElementById('log'),
    chat = document.getElementById('chat'),
    form = chat.form,
    conn = {},
    state = document.getElementById('status'),
    entities = {
        '<': '<',
        '>': '>',
        '&': '&'
    };

    if (window.WebSocket === undefined) {
        state.innerHTML = 'Sockets not supported';
        state.className = 'fail';
    } else {
        state.onclick = function () {
            if (conn.readyState !== 1) {
                conn.close();
                setTimeout(function () {
                    openConnection();
                }, 250);
            }
        };

        addEvent(form, 'submit', function (event) {
            event.preventDefault();

            // if we're connected
            if (conn.readyState === 1) {
                conn.send(JSON.stringify(chat.value));
                log.innerHTML = '<li class="you">' + chat.value.replace(/[<>&]/g, function (m) { return entities[m]; }) + '</li>' + log.innerHTML;

                chat.value = '';
            }
        });

        openConnection();
    }

</script><a id="html5badge" href="http://www.w3.org/html/logo/"></a>

</section>

<script src="http://html5demos.com/js/prettify.packed.js"></script>
<script>
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
    try {
        var pageTracker = _gat._getTracker("UA-1656750-18");
        pageTracker._trackPageview();
    } catch (err) { }</script>





</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
